<h1>Animations</h1>
<style>
	.box {
		position: static;
		float: left;				
		height: 100px;
		width: 100px;
	}
	
	.box div {
		background-color: #F2F2F2;	
		border: solid thin #CC9900;
		height: 90px;
		width: 90px;
	}
	
	.box div p {
		font-family: arial;
		text-align: center;
		padding: 10px;
	}
</style>

<script>
	function ReAppear(element) {
		window.setTimeout('new Effect.Appear(\'' + element.id + '\', {duration:.3})',2500);
	}
</script>

<!-- 
	À noter : 
	  - Toujours mettre un id sur les éléments à animer
		
-->
<div class="box">
	<div id="b1" onclick="new Effect.SwitchOff(this); ReAppear(this)">
    <p>La démo SwitchOff</p>
	</div>
</div>
<div class="box">
	<div id="b2" onclick="new Effect.BlindDown(this); ReAppear(this)">
    <p>La démo BlindDown</p>
	</div>
</div>
<div class="box">
	<div id="b3" onclick="new Effect.BlindUp(this); ReAppear(this)">
    <p>La démo BlindUp</p>
	</div>
</div>
<div class="box">
	<div id="b4" onclick="new Effect.Puff(this); ReAppear(this)">
    <p>La démo Puff</p>
	</div>
</div>

<br style="clear: both" />

<div class="box">
	<div id="b5" onclick="new Effect.Squish(this); ReAppear(this)">
    <p>La démo Squish</p>
	</div>
</div>
<div class="box">
	<div id="b6" onclick="new Effect.Fade(this); new Effect.Appear(this); ReAppear(this)">
    <p>La démo Appear</p>
	</div>
</div>
<div class="box">
	<div id="b7" onclick="new Effect.Fade(this); ReAppear(this)">
	  <p>La démo Fade</p>
	</div>
</div>
<div class="box">
	<div id="b8" onclick="new Effect.Shake(this); ReAppear(this)">
    <p>La démo Shake</p>
	</div>
</div>

<br style="clear: both" />

<div class="box">
	<div id="b9" onclick="new Effect.DropOut(this); ReAppear(this)">
    <p>La démo DropOut</p>
	</div>
</div>
<div class="box">
	<div id="b10" onclick="new Effect.Shrink(this); ReAppear(this)">
    <p>La démo Shrink</p>
	</div>
</div>
<div class="box">
	<div id="b11" onclick="new Effect.Highlight(this); ReAppear(this)">
    <p>La démo Highlight</p>
	</div>
</div>
<div class="box">
	<div id="b12" onclick="new Effect.Fold(this); ReAppear(this)">
    <p>La démo Fold</p>
	</div>
</div>


<br style="clear: both" />

<div class="box">
	<div id="b13" onclick="new Effect.Pulsate(this); ReAppear(this)">
    <p>La démo Pulsate</p>
	</div>
</div>
<div class="box">
	<div id="b14" onclick="new Effect.Grow(this); ReAppear(this)">
    <p>La démo Grow</p>
	</div>
</div>
<div class="box">
	<div id="b15" onclick="new Effect.SlideUp(this); ReAppear(this)">
    <p>La démo SlideUp</p>
	</div>
</div>
<div class="box">
	<div id="b16" onclick="new Effect.SlideDown(this); ReAppear(this)">
    <p>La démo SlideDown</p>
	</div>
</div>